<template>
  <div>
    <template v-for="(part, index) in list">
      <div class="contentshow" :key="index">
        <!-- 头像和用户名 -->
        <div class="user">
            <img :src="part.user.image" alt="" />
            <span>{{ part.user.name }}</span>
        </div>
        <!-- 展开状态 -->
        <div v-if="part.tag">
          <div class="content" v-html="part.content"></div>
          <div class="createtime">{{ part.createtime }}</div>
        </div>
        <!-- 收起状态 -->
        <div v-else>
          <div class="text" >{{part.text}}
            <p
              v-show="!part.tag"
              @click="contentSwitch(index)"
              class="show_hidden"
            >
              展开<i class="el-icon-arrow-down"></i>
            </p>
          </div>
          
        </div>
        <div class="topiccount">
          <!-- 点赞数 -->
          <div
            v-if="part.praise != null && part.praise.status == 0"
            style="display: inline-block"
          >
            <img
              src="../../assets/img/topicicon/like2.png"
              alt=""
              @click="like(part.id, 1, part.type)"
            />
          </div>
          <div v-else style="display: inline-block">
            <img
              src="../../assets/img/topicicon/like1.png"
              alt=""
              @click="like(part.id, 0, part.type)"
            />
          </div>
          <p>{{ part.like_num }}</p>
          <!-- 收藏数 -->
          <div
            v-if="
              part.collect_topic != null && part.collect_topic.is_delete == '1'
            "
            style="display: inline-block"
          >
            <img
              src="../../assets/img/topicicon/collect2.png"
              alt=""
              @click="nocollect(part.tid)"
            />
          </div>
          <div v-else style="display: inline-block">
            <img
              src="../../assets/img/topicicon/collect1.png"
              alt=""
              @click="collect(part.tid)"
            />
          </div>
          <p>{{ part.collection_num }}</p>
          <img @click="part.disShow = !part.disShow" src="../../assets/img/topicicon/comment1.png" alt="" />
          <p @click="part.disShow = !part.disShow" v-show="part.disShow">{{ part.discussion_num }} 条评论</p>
          <p @click="part.disShow = !part.disShow" v-show="!part.disShow">取消评论</p>
          <span>浏览量 {{ part.browse_num }}</span>
          <p
            v-show="part.tag"
            @click="contentSwitch(index)"
            class="show_hidden"
          >
            收起<i class="el-icon-arrow-up"></i>
          </p>
        </div>
        <div v-if="!part.disShow" class="discussionShow">
          <discussion :id="part.id" :type="3"></discussion>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import {
  topiclike_num,
  topiccollent_num,
} from "../../api/recommend";
import Discussion from '../discussion/Discussion.vue';
export default {
  components: { Discussion },
  name: "ReplyIssue",
  props: {
    list: {},
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    contentSwitch(index) {
      console.log(this.list[index]);
      this.list[index].tag = !this.list[index].tag;
      this.$forceUpdate();
    },
    //修改点赞状态
    like(id, status, type) {

      topiclike_num({
        uid: localStorage.getItem("uid"),
        id: id,
        status: status,
        type: type,
      }).then((res) => {
        if (res.code == 200) {
          this.$emit("refreshData")
        } else {
          this.$message.error(res.mess);
        }
      });
    },
    //修改收藏状态
    // collect(ttid) {
    //   topiccollent_num({
    //     uid: localStorage.getItem("uid"),
    //     tid: ttid,
    //     is_delete: "1",
    //   }).then((res) => {
    //     if (res.code == 200) {
    //       this.getTopic();
    //     }
    //   });
    // },
    // nocollect(ttid) {
    //   topiccollent_num({
    //     uid: localStorage.getItem("uid"),
    //     tid: ttid,
    //     is_delete: "0",
    //   }).then((res) => {
    //     if (res.code == 200) {
    //       this.getTopic();
    //     }
    //   });
    // },
  },
};
</script>
<style scoped>
.contentshow {
  padding: 10px 20px;
  background-color: #fff;
  margin-bottom: 2px;
  color: black;
}
/* 标题 */
.contentshow .title {
  font-size: 20px;
  font-weight: bold;
  margin: 15px 0px 15px 0px;
}
.contentshow .title > span {
  line-height: 35px;
}
.contentshow .title > span:hover {
  color: #409eff;
}
/* 标题  END */
/* 用户 */

.user {
  /* border: 1px solid red; */
  position: relative;
  margin-bottom: 15px;
}
.user > img {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  vertical-align: middle;
}
.user > span {
  margin-left: 10px;
  font-size: 16px;
  color: black;
  vertical-align: middle;
}
/* 用户 END  */
/* 展开的内容 */
.contentshow >>> .content {
  padding: 0px 20px;
  /* border: 1px solid black; */
}
.contentshow >>> .content p {
  line-height: 30px;
}
.contentshow >>> .content img {
  display: block;
  width: 60%;
  margin: 0 auto;
}
.contentshow .content >>> .ql-syntax {
  background-color: #23241f;
  color: #eaeae4;
  /* white-space: nowrap; */
  overflow-y: hidden;
  overflow-x: scroll;
  max-width: 650px;
}
.contentshow .createtime {
  padding: 20px 0px 0px 0px;
  color: #8a8a8a;
  font-size: 13px;
}

/* 收起的内容 */
.contentshow .text {
  padding: 0px 10px;
  line-height: 25px;
  /*超出部分隐藏*/
  /* overflow: hidden; */
  /*不换行*/
  /* white-space: nowrap; */
  /*超出部分文字以...显示*/
  /* text-overflow: ellipsis; */
  /* line-clamp: 2; */

  /* text-overflow: -o-ellipsis-lastline;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  vertical-align: middle; */
}

/* 点赞、收藏 */
.contentshow .topiccount {
  margin: 10px 0px 0px 0px;
  font-size: 16px;
  /* text-align: center; */
}
.contentshow .topiccount img {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
.contentshow .topiccount p {
  display: inline-block;
  margin: 0px 50px 0px 8px;
  vertical-align: middle;
}
.contentshow .topiccount span {
  font-size: 13px;
  color: #747d8c;
}

.contentshow .show_hidden {
  display: inline-block;
  margin: 5px 0px;
  font-size: 15px;
  color: #409eff;
  vertical-align: middle;
}


/* 评论展示 */
.discussionShow {
  margin-top: 20px;
  border-radius: 5px;
  /* border: 1px solid red; */
  /* box-shadow:0px 0px 3px #2f3542; */

  border: none;
  box-shadow: 0 12px 5px -10px rgba(0,0,0,0.2), 0 0 4px 0 rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 12px 5px -10px rgba(0,0,0,0.2), 0 0 4px 0 rgba(0,0,0,0.2);
  border-radius: 5px;
}
</style>